<template>
<div class="nav-header">
  <div class="menu-icon" @click="handleMenuIcnoClick()">
    <el-icon><component :is="isFold ? 'Expand' : 'Fold'"/></el-icon>

  </div>
  <div class="content">
    <header-crumb/>
    <header-info/>
  </div>
</div>
</template>

<script setup lang="ts">
import {ref, defineEmits, onMounted} from "vue";


import HeaderInfo from "@/components/header-info.vue";
import HeaderCrumb from "@/components/header-crumb.vue";

let isFold = ref(false)
const emit = defineEmits(["foldChange"])

function handleMenuIcnoClick() {
  isFold.value = !isFold.value
  emit("foldChange",isFold.value)
}

</script>

<style scoped>
.nav-header {
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
}
.menu-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding:0 18px;}
</style>
